// @flow
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import paperDecorator from '../../PaperDecorator';
import alertDecorator from '../../AlertDecorator';
import EditProfileDialog, {
  type EditProfileDialogProps,
} from '../../../Profile/EditProfileDialog';
import { fakeAchievements } from '../../../fixtures/GDevelopServicesTestData/FakeAchievements';
import {
  limitsForStudentUser,
  limitsForNoSubscriptionUser,
} from '../../../fixtures/GDevelopServicesTestData';

export default {
  title: 'Profile/EditProfileDialog',
  component: EditProfileDialog,
  decorators: [paperDecorator, alertDecorator],
};

const defaultProps: EditProfileDialogProps = {
  onClose: () => action('onClose')(),
  onEdit: async () => action('onEdit')(),
  onDelete: action('onDelete'),
  onUpdateGitHubStar: async () => ({
    code: 'github-star/badge-already-given',
  }),
  onUpdateTiktokFollow: async () => ({
    code: 'tiktok-follow/badge-already-given',
  }),
  onUpdateTwitterFollow: async () => ({
    code: 'twitter-follow/badge-already-given',
  }),
  achievements: fakeAchievements,
  badges: [
    {
      userId: 'user-id',
      achievementId: 'github-star',
      unlockedAt: '',
      seen: false,
    },
  ],
  actionInProgress: false,
  error: null,
  profile: {
    id: 'id',
    email: 'email',
    username: 'username',
    description: 'I am just another video game enthusiast!',
    getGameStatsEmail: false,
    getNewsletterEmail: true,
    isCreator: true,
    isPlayer: false,
    isEmailAutogenerated: false,
    createdAt: 12345,
    updatedAt: 12345,
    appLanguage: 'en',
    donateLink: 'https://www.gdevelop-app.com',
    discordUsername: 'indie-user#1234',
    githubUsername: 'some-github-user',
    communityLinks: {
      personalWebsiteLink: 'https://indie-user.com',
      personalWebsite2Link: 'https://indie-user2.com',
      twitterUsername: 'indie-user',
      facebookUsername: 'indie-user',
      youtubeUsername: 'indie-user',
      tiktokUsername: 'indie-user',
      instagramUsername: 'indie-user',
      redditUsername: 'indie-user',
      snapchatUsername: 'indie-user',
      discordServerLink: 'https://discord.gg/indie-user',
    },
  },
  subscription: {
    userId: 'id',
    planId: 'planId',
    createdAt: 12345,
    updatedAt: 12345,
    pricingSystemId: 'whatever',
  },
  limits: limitsForNoSubscriptionUser,
};
export const WithSubscription = () => <EditProfileDialog {...defaultProps} />;

export const WithoutSubscription = () => (
  <EditProfileDialog {...defaultProps} subscription={null} />
);

export const WithoutGithubUsernameAndNoGithubStarBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    badges={[]}
    profile={{ ...defaultProps.profile, githubUsername: null }}
    subscription={null}
  />
);

export const WithGithubUsernameButNoGithubStarBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    subscription={null}
    badges={[]}
    onUpdateGitHubStar={async () => ({
      code: 'github-star/badge-given',
    })}
  />
);

export const WithGithubUsernameButErrorWhenGivingGithubStarBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    subscription={null}
    badges={[]}
    onUpdateGitHubStar={async () => ({
      code: 'github-star/repository-not-starred',
    })}
  />
);

export const WithGithubUsernameButUserNotFoundWhenGivingGithubStarBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    subscription={null}
    badges={[]}
    onUpdateGitHubStar={async () => ({
      code: 'github-star/user-not-found',
    })}
  />
);

export const WithNoTiktokBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    subscription={null}
    badges={[]}
    onUpdateTiktokFollow={async () => ({
      code: 'tiktok-follow/badge-given',
    })}
  />
);

export const WithErrorWhenGivingTiktokBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    subscription={null}
    badges={[]}
    onUpdateTiktokFollow={async () => ({
      code: 'tiktok-follow/account-not-followed',
    })}
  />
);

export const WithUserNotFoundWhenGivingTiktokBadge = () => (
  <EditProfileDialog
    {...defaultProps}
    subscription={null}
    badges={[]}
    onUpdateTiktokFollow={async () => ({
      code: 'tiktok-follow/user-not-found',
    })}
  />
);

export const ErrorFromBackend = () => (
  <EditProfileDialog {...defaultProps} error={{ code: 'auth/username-used' }} />
);

export const Submitting = () => (
  <EditProfileDialog {...defaultProps} actionInProgress />
);
export const WithStudentUser = () => (
  <EditProfileDialog {...defaultProps} limits={limitsForStudentUser} />
);
